<template>
  <div class="login">
    <h1>嗨购后台管理系统登录</h1>
    <el-form
      ref="ruleFormRef"
      :model="LoginData"
      status-icon
      label-width="120px"
      :rules="rules"
    >
      <el-form-item label="用户名" prop="adminname" required>
        <el-input
          v-model="LoginData.adminname"
          type="text"
          autocomplete="off"
          clearable
          @keyup.enter="submitForm()"  placeholder="请输入至少两位的账号名"
        />
      </el-form-item>
      <el-form-item label="密码" prop="password" required >
        <el-input
          v-model="LoginData.password"
          type="password"
          autocomplete="off"
          :show-password="true"
          clearable
          @keyup.enter="submitForm()"  placeholder="请输入3-8位字母或数字或下划线的字符"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" plain @click="submitForm()">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import service from "../../utils/service";

import { ElMessage } from "element-plus";
import "element-plus/dist/index.css";

import getRoutes from '../../grants/router'

// 需要跳转的页面引入useRouter
import { useRouter } from "vue-router";
// 定义rputer
const router = useRouter();

// 管理员数据
const LoginData = reactive({
  adminname: "",
  password: "",
});

// 按回车聚焦


// 正则
const validateAdminname = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入账号"));
  } else if (/^.{2,10}$/.test(value) == false) {
    callback(new Error("请输入符合至少两位的账号名"));
  } else {
    callback();
  }
};
const validatePassword = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else if (/^\w{3,8}$/.test(value) == false) {
    callback(new Error("请输入3-8位字母或数字或下划线的字符"));
  } else {
    callback();
  }
};

const rules = ref({
  password: [{ validator: validatePassword, trigger: "change" }],
  adminname: [{ validator: validateAdminname, trigger: "change" }],
});

const submitForm = () => {
  if (LoginData.adminname == "") {
    ElMessage({
      message: "亲,请确认管理员账号是否输入",
      type: "warning",
    });
  } else if (LoginData.password == "") {
    ElMessage({
      message: "亲,请确认管理员密码是否输入",
      type: "warning",
    });
  } else {
    service({
      url: "/admin/admin/login",
      method: "post",
      data: LoginData,
    }).then((res) => {
      if (res.data.code === "200") {
        ElMessage({
          message: "登录成功！",
          type: "success",
        });
        getRoutes()
        // 存储当前用户名
        sessionStorage.setItem("username", LoginData.adminname);
        // 存储token
        sessionStorage.setItem("token", res.data.data.token);

        // 存储当前用户的权限(获取的结果是个数组)
        sessionStorage.setItem(
          "grants",
          JSON.stringify(res.data.data.checkedkeys)
        );

        router.push("./HomeIndex");
      } else if (res.data.code === "10003") {
        ElMessage({
          message: "密码错误",
          type: "error",
        });
      } else {
        ElMessage({
          message: "未注册",
          type: "error",
        });
      }
    });
  }
};
</script>

<style scoped>
.login {
  width: 500px;
  height: 260px;
  border: 1px solid #bbc4e4;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #eef0f1;
}
.login h1 {
  line-height: 80px;
  text-align: center;
}
.el-form {
  padding-right: 80px;
}
</style>